import styled from 'styled-components'
import { useNavigate } from 'react-router-dom'
import { useStore } from '../store'

const Wrapper = styled.div<any>`
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  font-size: 1.6rem;

  & h1 {
    text-align: center;
  }
  & button.next {
    font-size: 1.8rem;
  }

`

const List = styled.ul<any>`
  & li {
    display: flex;
    justify-content: space-between;
  }
  & button {
    padding: .2rem .5rem;
  }
`
export default function Page () {
  const navigate = useNavigate();
  const todoList = useStore((state:any) => state.todoList)
  const removeItemFromList = useStore((state:any) => state.removeItemFromList)
  const setItemCheck = useStore((state:any) => state.setItemCheck)

  console.log(todoList)
  const onDelete = (id:number) => () => {
    removeItemFromList(id)
  }
  const onCheckChange = (id:number) => (e:any) => {
    setItemCheck(id, e.target.checked)
  }
  return (
    <Wrapper>
      <h1>Notice Page</h1>

      <List>

      { todoList.map((x:any, index: number) => (
        <li key={index}>
          <input type="checkbox" checked={x.isDone} onChange={onCheckChange(index)} />
          <span>{x.title}</span>
          <span>{x.due || ''}</span>
          <button onClick={onDelete(index)}>
            Del
          </button>
        </li>
      ))}

      </List>

      <button className="next" onClick={() => navigate('/step1')}>+</button>

    </Wrapper>
  )
}
